<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue demo</title>
</head>
<body>
<div id="app">
   <div>message: {{ message }}</div>
    <div>reversed message: {{ reversedMessage }}</div>
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
    <p v-if="seen">
        现在你看到我了
    </p>

    <input type="text" v-model="firstName">
    <input type="text" v-model="lastName">
    <div>full name : {{ fullName }}</div>
    <ul>
        <li v-for="todo in todos">
            {{ todo }}
        </li>
    </ul>

    <input type="text" v-model="message">

    <button v-on:click="reverseMessage">反转消息</button>

    <ol>
        <todo-item
        v-for="item in foods"
        v-bind:todo="item"
        v-bind:key="item.id"
        >

        </todo-item>
    </ol>
    <hr>
    <p>
        Ask a yes/no question:
        <input v-model="question">
    </p>
    <p>{{ answer }}</p>

    <hr>
    <h2>组件prop传递</h2>
    <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post
        v-on:enlarge-text="postFontSize += $event"
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:post="post"
        ></blog-post>
    </div>

</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
Vue.component('todo-item',{
    props:['todo'],
    template:'<li> {{ todo.text }}</li>'
});

Vue.component('blog-post',{
    props:['post'],
    template:`
        <div class="blog-post" >
            <h3>{{ post.title }}</h3>
            <button v-on:click="$emit('enlarge-text',0.1)">
  Enlarge text
</button>
            <div>策四</div>
        </div>
    `
});
var app = new Vue({
    el:"#app",
    data:{
        message:'Hello Vue',
        seen:false,
        question:'',
        answer:'I cannot give you an answer until you ask a question!',
        todos:[
            {'text':'hello1'},
            {'text':'hello2'},
            {'text':'hello3'},
            {'text':'hello4'},
            {'text':'hello5'}
        ],
        foods:[
            { id:0,text:'白菜'},
            { id:1,text:'萝卜'},
            { id:2,text:'青菜'},
        ],
        fullName:'Foo bar',
        firstName:'Foo',
        lastName:'bar',
        posts:[
            { id: 1, title: 'My journey with Vue' },
            { id: 2, title: 'Blogging with Vue' },
            { id: 3, title: 'Why Vue is so fun' }
        ],
        postFontSize: 1,
    },
    watch:{
        firstName: function (val) {
            this.fullName = val + ' '+ this.lastName;
        },
        lastName: function (val) {
            this.fullName = this.firstName + ' '+val;
        },
        question:function (newQuestion, oldQuestion) {
            this.answer = 'Waiting for you to stop typing...';
            this.debouncedGetAnswer();
        }
    },
    created: function(){
        this.debouncedGetAnswer = _.debounce(this.getAnswer,500);
    },
    methods:{
        getAnswer:function(){
            if (this.question.indexOf('?') === -1){
                this.answer= 'Questions usually contain a question mark. ;-)';
                return;
            }
            this.answer = 'Think...';
            var vm = this;
            axios.get('https://yesno.wtf/api')
                .then(function(response){
                    vm.answer = _.capitalize(response.data.answer)
                })
                .catch(function(error){
                    vm.answer = 'Error ! Could not reach the api. '+ error;
                })

        },
        reverseMessage : function () {
            this.message = this.message.split('').reverse().join('');
        }
    },
    computed:{
        reversedMessage:function () {
            return this.message.split('').reverse().join('');
        }
    }
});

</script>
</html>